<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{reversMsg()}} <br />
		<input type="text" v-model="txt" />	 
		<h3>{{getMsg()}}</h3>	
		<hr />	
		<p>当前的年龄是：{{getAge()}}</p>	
		<p>当前的年龄是：{{getAge()}}</p>	
		<p>当前的年龄是：{{getAge()}}</p>	
		
		<p>我是计算属性的年龄：{{getBirthday}}</p>	
		<p>我是计算属性的年龄：{{getBirthday}}</p>	
		<p>我是计算属性的年龄：{{getBirthday}}</p>	
		<p>我是计算属性的年龄：{{getBirthday}}</p>	
		
		<hr /> <br />
		<p>{{number|getFomt(3)|getPrice(7)}}</p>
		<p>{{price|getPrice(7)}}</p>
		
		
		
		</div>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				msg:'hello',
				txt:'',
				birthday:'2015-5-20',
				number:99.99,
				price:'$20.0'
				
			},
			methods:{
				reversMsg(){
					return  this.msg.split('').reverse().join('')
				},
				getMsg(){
					return  this.txt.split('').reverse().join('')
				},
				getAge(){
					console.log('methods')
				  return  new Date().getFullYear()-new Date(this.birthday).getFullYear()
				}
			},
			computed:{
				getBirthday(){
					console.log('computed')
					return  new Date().getFullYear()-new Date(this.birthday).getFullYear()
				}
			},
			filters:{
				getFomt(numb,n){
					return numb.toFixed(n)
				},
				getPrice(str,n){
					return str.padEnd(n,0)
				}
				
			}
			
			
		})
		
		
		
	</script>
		<!-- 过滤器 -->
		<!-- getFomt(数据,参数1，参数2) -->
	</body>
</html>
